<template>
  <div>
    <div class="main">
      <div class="center">
        <div class="column">
          <div class="panel">
            <h4>人员-镇泰楼</h4>
            <ul style="display: flex;">
              <li v-for="(item, index) in stateLabel" :key="index">
                <span class="label" v-text="item"></span>
              </li>
            </ul>
            <vue-seamless-scroll
                    :data="stateData.ZhenTaiFloor"
                    class="seamless-warp"
                    :class-option="{ step: 0.3 }"
            >
              <ul class="item">
                <li
                        v-for="(item, index) in stateData.ZhenTaiFloor"
                        :key="index"
                >
                  <span class="title" v-text="item.Zstate"></span>
                  <span class="title" v-text="item.Zname"></span>
                  <span class="title" v-text="item.Zphone"></span>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
          <div class="panel">
            <h4>人员-图书馆</h4>
            <ul style="display: flex;">
              <li v-for="(item, index) in stateLabel" :key="index">
                <span class="label" v-text="item"></span>
              </li>
            </ul>
            <vue-seamless-scroll
                    :data="stateData.library"
                    class="seamless-warp"
                    :class-option="{ step: 0.3 }"
            >
              <ul class="item">
                <li v-for="(item, index) in stateData.library" :key="index">
                  <span class="title" v-text="item.Lstate"></span>
                  <span class="title" v-text="item.Lname"></span>
                  <span class="title" v-text="item.Lphone"></span>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
          <div class="panel">
            <h4>人员-南苑餐厅</h4>
            <ul style="display: flex;">
              <li v-for="(item, index) in stateLabel" :key="index">
                <span class="label" v-text="item"></span>
              </li>
            </ul>
            <vue-seamless-scroll
                    :data="stateData.Nrestaurant"
                    class="seamless-warp"
                    :class-option="{ step: 0.3 }"
            >
              <ul class="item">
                <li v-for="(item, index) in stateData.Nrestaurant" :key="index">
                  <span class="title" v-text="item.Nstate"></span>
                  <span class="title" v-text="item.Nname"></span>
                  <span class="title" v-text="item.Nphone"></span>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
          <div class="panel-footer"></div>
        </div>
        <div class="column">
          <div id="bar" style="height:600px; margin-top: 50px;"></div>
        </div>
        <div class="column">
          <div class="panel">
            <h4>人员-体育馆</h4>
            <ul style="display: flex;">
              <li v-for="(item, index) in stateLabel" :key="index">
                <span class="label" v-text="item"></span>
              </li>
            </ul>
            <vue-seamless-scroll
                    :data="stateData.gym"
                    class="seamless-warp"
                    :class-option="{ step: 0.3 }"
            >
              <ul class="item">
                <li v-for="(item, index) in stateData.gym" :key="index">
                  <span class="title" v-text="item.Gstate"></span>
                  <span class="title" v-text="item.Gname"></span>
                  <span class="title" v-text="item.Gphone"></span>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
          <div class="panel">
            <h4>人员-教学楼</h4>
            <ul style="display: flex;">
              <li v-for="(item, index) in stateLabel" :key="index">
                <span class="label" v-text="item"></span>
              </li>
            </ul>
            <vue-seamless-scroll
                    :data="stateData.teachBuild"
                    class="seamless-warp"
                    :class-option="{ step: 0.3 }"
            >
              <ul class="item">
                <li v-for="(item, index) in stateData.teachBuild" :key="index">
                  <span class="title" v-text="item.Tstate"></span>
                  <span class="title" v-text="item.Tname"></span>
                  <span class="title" v-text="item.Tphone"></span>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
          <div class="panel">
            <h4>人员-北苑餐厅</h4>
            <ul style="display: flex;">
              <li v-for="(item, index) in stateLabel" :key="index">
                <span class="label" v-text="item"></span>
              </li>
            </ul>
            <vue-seamless-scroll
                    :data="stateData.Brestaurant"
                    class="seamless-warp"
                    :class-option="{ step: 0.3 }"
            >
              <ul class="item">
                <li v-for="(item, index) in stateData.Brestaurant" :key="index">
                  <span class="title" v-text="item.Bstate"></span>
                  <span class="title" v-text="item.Bname"></span>
                  <span class="title" v-text="item.Bphone"></span>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
          <div class="panel-footer"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getBar,
    getRecordPersonNum,
    getPersonStateNum,
  } from "../../plugins/AreaMonitor.js";
  import vueSeamlessScroll from "vue-seamless-scroll";
  export default {
    data() {
      return {
        stateLabel: ["状态", "姓名", "电话"],
        stateData: {
          library: [],
          Brestaurant: [],
          Nrestaurant: [],
          ZhenTaiFloor: [],
          teachBuild: [],
          gym: [],
        },
        time: 3000,
      };
    },
    components: {
      vueSeamlessScroll,
    },
    mounted() {
      this.getCharts();
      if (this.timer) {
        clearInterval(this.timer);
      } else {
        this.timer = setInterval(() => {
          //console.log("刷新" + new Date());
          this.getValueData();
        }, this.time);
      }
    },
    methods: {
      // getCharts() {
      //   this.$http.record.findAll().then( res=>{
      //     let Data= res.data;
      //     let stateData= getPersonStateNum(Data);
      //     getBar(stateData);
      //   })

      // },
      getCharts() {
        getBar();
      },
      getValueData() {
        this.$http.record.findAll().then((res) => {
          let Data = res.data;
          this.stateData = getRecordPersonNum(Data);
        });
      },
    },
  };
</script>

<style Lang="less" scoped>
  @import "~@/styles/AreaMonitor.scss";
</style>
